Programmeren 4
Home

Programmeren 4

Logo Fric-frac project in PHP

Programmeren 4

Het Fric-frac simple CRUD project 1

Doelstelling

  1. een logisch model omzetten naar MySQL DDL
  2. leren werken met klassen in het algemeen in PHP;
  3. leren werken met de PDO klasse;
  4. We leren hoe je code van een vorig project hergebruikt om een nieuw project te maken. Om de opdracht te realiseren baseer je op de kennis die je hebt opgedaan in de vorige les:
    1. Tania Rascia, Create a Simple CRUD Database App: Connecting to MySQL with PHP (Part 1: Create, Read), May 15, 2017
    2. Tania Rascia, Create a Simple CRUD Database App: Connecting to MySQL with PHP (Part 2: Update, Delete), April 22, 2018

Stappenplan

  1. Als je problemen hebt met de SQL driver of met de PHP ingebouwde webserver, bekijk het volgende filmpje:

    In het filmpje heb ik mijn PHP geïnstalleerd in de map c:/temp/php-7.3. Je kan die map verplaatsen naar Program Files. Als je dat doet vergeet dan niet:

    1. de path systeemvariabele aan te passen;
    2. in het php.ini bestand de extension_dir instelling te wijzigen (let op backspaces, dit is Windows!!):
      extension_dir = "C:\Program Files\php-7.3\ext"
  2. Hier vind je een overzicht van wat we in deze les leren:
  3. Je herneemt Fric-frac Logisch model.
  4. Op basis van het logisch model schrijf je de DDL SQL scripts.
  5. In de map Programmeren4 maken we een submap met de naam fric-frac-simple-crud.
  6. We openen die map in Visual Code en dan kunnen we gelijk de server in deze map in de terminal opstarten:
    php -S localhost:63347
  7. In de submap fric-frac-simple-crud maken we een submap met de naam data en we plaatsen daarin een bestand met de naam fric-frac-ddl.sql. In dat bestand zetten we de SQL scripts om de tabellen te creëren:
  8. In de map fric-frac-simple-crud plaatsen we het aangepaste config.php bestand: 
    ?php
/**
* Configuration for database connection
*
*/
$host       = "51.38.37.150:3306";
$username   = "Docent1";
$password   = "XXXXXXXXXXX";
$dbname     = "Docent1"; // will use later
$dsn        = "mysql:host=$host;dbname=$dbname"; // will use later
$options    = array(
    PDO::ATTR_ERRMODE = PDO::ERRMODE_EXCEPTION
);
  9. Voeg aan het .gitignore bestand de naam van het config.php bestand toe. We willen niet dat dit op Bitbucket komt te staan omdat er een paswoord in staat: 
    .idea
.vs/
lib/
bin/
obj/
.DS_Store
*.sln
config.php

    Het .gitignore bestand staat in de Programmeren4 map. We hebben slechts 1 repo voor alle oefeningen en opdrachten van Programmeren 4.

  10. In de map fric-frac-simple-crud plaatsen we het install.php bestand waarmee we de tabellen gaan aanmaken: 
    <?php
/**
 * Open a connection via PDO to create a
 * new database and table with structure.
 * als je met de remote SQL server werkt, moet je geen
 * database meer aanmaken, die bestaat al bv Student1
 */
require "config.php";

try {
    $connection = new PDO("mysql:host=$host", $username, $password, $options);
    $sql = file_get_contents("data/fric-frac-ddl.sql");
    echo $sql;
    $connection->exec($sql);

    echo "Tables EventCategory, EventTopic en Event created successfully.";
} catch (PDOException $error) {
    echo $sql . " " . $error->getMessage();
}
  11. En in fric-frac-simple-crud maken we een submap met de naam public.
  12. Overzicht omzetten wireframes naar HTML:
  13. In de public maken maken we een index.php pagina met de html voor de admin index pagina. We baseren ons daarvoor op Fric-frac Wireframes. 
    <!DOCTYPE html>
<html lang="nl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fric-frac simple CRUD</title>
</head>

<body class="editor">
    <header class="page-header"><h1 class="banner">Fric-frac</h1></header>
    <article class="show-room index">
        <a href="/EventCategory/Index.php">Event Category</a>
        <a href="EventTopic/Index.php">Event Topic</a>
        <a href="Event/Index.html">Event Index</a>
        <div class="tile">Informatieve tegel</div>
    </article>
   <footer class="page-footer">
   <p>&copy ModernWays 2020</p>
   <p>Opdracht Programmeren 4</p>
   </footer>
</body>
</html>
  14. In de map EventCategory in public maken we gebaseerd op Fric-frac Wireframes Person:
    1. Index.php 
      <!DOCTYPE html>
<html lang="nl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fric-frac simple CRUD</title>
</head>
<body class="editor">
    <header class="page-header">
        <nav class="control-panel">
            <a href="index.php" class="tile">Admin</a>
        </nav>
        <h1 class="banner">Fric-frac</h1>
    </header>
    <section class="show-room entity">
        <div class="detail">
            <nav class="command-panel">
                <h2 class="banner">Eventcategory</h2>
                <a href="/EventCategory/InsertingOne.php" class="tile">Inserting One</a>
            </nav>
            <fieldset></fieldset>
            <div class="feedback">
            </div>
        </div>
        <?php include('ReadingAll.php'); ?>
    </section>
   <footer class="page-footer">
        <p>&copy ModernWays 2020</p>
        <p>Opdracht Programmeren 4</p>
    </footer>
      </body>
</html>

      In de Index.php voeren we een include uit om de ReadingAll view in te sluiten. Dat doen we omdat we die view in alle andere views nodig hebben.

    2. ReadingAll.php

      <aside class="list">
    <table>
        <tr>
            <th>Select</th>
            <th>Naam</th>
            <th>Id</th>
        </tr>
    </table>
</aside>

    3. InsertingOne.php

      <!DOCTYPE html>
<html lang="nl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fric-frac simple CRUD</title>
</head>
<body class="editor">
    <header class="page-header">
        <nav class="control-panel">
            <a href="/index.php" class="tile">Admin</a>
        </nav>
        <h1 class="banner">Fric-frac</h1>
    </header>
    <section class="show-room entity">
        <form id="form" method="post" action="/EventCategory/createOne" class="detail">
            <nav class="command-panel">
                <h2 class="banner">EventCategory</h2>
                <button type="submit" value="insert" name="uc" class='tile'>Insert</button>
                <a href="/EventCategory/Index.php" class="tile">Annuleren</a>
            </nav>
            <fieldset>
                <div>
                    <label for="Name">Naam</label>
                    <input type="text" required id="Name" name="Name" />
                </div>
            </fieldset>
            <div id="feedback"></div>
        </form>
        <?php include('ReadingAll.php'); ?>
    </section>
   <footer class="page-footer">
        <p>&copy ModernWays 2020</p>
        <p>Opdracht Programmeren 4</p>
    </footer>
      </body>
</html>

Opdracht

  1. Maak de DDL (omzetten van logisch model naar relationele database) voor de volgende tabellen in een bestand met de naam fric-frac-ddl.sql:
    1. EventCategory
    2. EventTopic
    3. Event
  2. Maak een config.php en een install.php.
  3. Voer het install.php bestand uit. Zorg ervoor dat je tabellen gemaakt zijn.
  4. Maak de index.php pagina in de public submap. Baseer je daarvoor op Fric-frac Wireframes.
  5. Voor de entiteiten EventCategory, EventTopic en Event maak je een submap in de public map met dezelfde naam als de entiteit.
  6. In de respectievelijke submappen maak je voor elke entiteit een:
    1. Index.php
    2. InsertingOne.php
    3. ReadingAll.php

    Baseer je daarvoor op het voorbeeld van Person in Fric-frac Wireframes Person. Let erop dat deze bestandsnamen in pascalnotatie worden geschreven. Later zien we waarom.

  7. Wijzig je .gitignore bestand en voeg config.php toe.
  8. Synchroniseer met Bitbucket.

JI
2020-03-21 11:56:57